<!-- 
	复制下载链接提示
 -->
<template>
	<view>
		<u-popup v-model="show" 
			mode="center" 
			:mask-close-able="false" 
			border-radius="30" 
			closeable 
			close-icon-size='36'
		>
			<view class="popup-container">
				<view class="title">文件将通过以下邮箱发送</view> 
				<input class="input" type="text" v-model="email" placeholder="请输入邮箱地址"/>
				<view class="btn" @tap="confirm">确认导出</view>
			</view>
		</u-popup>
	</view>
</template> 

<script>
	export default {
		name:'download-table',
		props:{
			downloadUrl: {
				default:'',
				type:String 
			}
		},
		data() {
			return {
				show:false,
				src:'',
				email:''
			}
		},
		methods:{
			confirm() {
				if(!this.$u.test.email(this.email)) {
					return this.$showToast('请输入正确邮箱地址！');
				};
				this.close();
				this.$emit('downTable', this.email);
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.popup-container {
		width: 560rpx;
		height: 385rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		padding: 85rpx 30rpx 60rpx 30rpx;
		.title {
			font-weight: 600;
			font-size: 32rpx;
			text-align: center;
		}
		
		.input {
			text-align: center;
			background-color: #E6E6E6;
			padding: 16rpx;
			border-radius: 8rpx;
		}
		.btn {
			width: 360rpx;
			height: 80rpx;
			background-color: #2EBA6A;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			border-radius: 12rpx;
		}
	}
</style>
